<template>
  <div class="bigbox">
    <div class="top">
      名称<el-input v-model="input" placeholder="属性名称"></el-input>
      分类<el-select v-model="select"  placeholder="请选择">
        <el-option
          :label="item.name"
          :value="item.id"
         v-for="item in getCategoryLists" :key="item.id"
        ></el-option>
      </el-select>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button type="primary" @click="addFn">添加</el-button>
    </div>

    <div class="btm">
      <el-table border style="width: 100%" :data="getAttributeLists">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="属性名称"></el-table-column>
        <el-table-column prop="" label="属性分类">

          <template slot-scope="scope">
              {{ shuxufenlei[scope.row.attribute_category_id] }}
          </template>

        </el-table-column>
        <el-table-column prop="caozuo" label="操作">
           <template slot-scope="scope">
        <el-button
        type="primary"
          @click="bianjiFn(scope.row.id)">编辑</el-button>
      </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="last">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getAttributeLists, getCategoryLists } from "../../request/httpApi";
export default {
  data() {
    return {
      input: "",
      select: "",
      getAttributeLists: [],
      page: 1,
      size: 10,
      count: 0,
      obj: {},
      getCategoryLists: [],
      shuxufenlei: [],
    };
  },

  created() {
    this.fengzhuang();
    // 属性分类
    getCategoryLists().then((res) => {
      console.log(res.data);
      this.getCategoryLists = res.data;

      this.getCategoryLists.map((item) => {
        this.obj[item.id] = item.name;
      });
      console.log(this.obj);
      this.shuxufenlei = this.obj;
    });
  },

  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.size = `${val}`;
      this.fengzhuang();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = `${val}`;
      this.fengzhuang();
    },

    // 封装
    fengzhuang() {
      getAttributeLists({
        page: this.page,
        size: this.size,
      }).then((res) => {
        console.log(res.data);
        this.getAttributeLists = res.data.data;
        this.count = res.data.count;

        /* this.getAttributeLists.map((item) => {
          this.obj[item.id] = item.name;
        });
        console.log(this.obj); */
      });
    },

    // 查询
    search() {
      console.log(this.shuxufenlei);
      console.log(this.input);
      getAttributeLists({
        page: this.page,
        size: this.size,
        name: this.input,
        c_id: this.select
      }).then((res) => {
        console.log(res.data);
        this.getAttributeLists = res.data.data;
        this.count = res.data.count;

        /* this.getAttributeLists.map((item) => {
          this.obj[item.id] = item.name;
        });
        console.log(this.obj); */
      });
    },

     // 添加跳转页
  addFn(){
    this.$router.push('/addattribute')
  },

  // 跳转编辑页
  bianjiFn(e){
    // console.log(e);
    this.$router.push(`/editattribute/${e}`)
  }
  },

 
};
</script>

<style lang="less" scoped>
.bigbox {
  padding-top: 20px;
  padding-bottom: 160px;
  background-color: #fff;
  .top {
    padding-bottom: 20px;
    padding-left: 20px;
    .el-input {
      margin-left: 15px;
      width: 210px;
      margin-right: 15px;
      /deep/ .el-input__inner {
        height: 36px;
        line-height: 36px;
        border-radius: 5px;
      }
    }
    .el-button--primary {
      margin-left: 15px;
    }
    /deep/ .el-input--suffix .el-input__inner {
      margin-left: 10px;
    }
  }
  .last {
    padding-top: 20px;
    position: absolute;
    right: 0;
  }
}
</style>
